<template>
    <div class="model" v-if="modelValue">
      <div class="warn">
        <el-button type="warning" @click="close">关闭</el-button>
      </div>
      <h4>我是v-model子组件</h4>
        <div class="dvie"> 
          <div>内容： </div>
          <div>
            <!--01. 这个是对象方式的双向数据绑定 -->
            <el-input   
            :modelValue="searinpuchDate.keyword" 
             @update:modelValue="handleKeywordChange"
             placeholder="Please input" />
             <!-- 2. 这里采用 computed 计算属性结合v-module语法糖写法-->
            <el-input   
            v-model="model.keyword"
             placeholder="Please input" >
             <template #prepend>
      <el-select
        v-model="model.selectedValue"
        placeholder="Select"
        style="width: 85px"
      >
        <el-option
          v-for="item in model.Options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
             </el-input>
             <!-- 这个是布尔或者是字符串绑定 -->
            <input style="margin-top: 20px;" type="text" @input="change" :value="searchDate">
          </div>
       </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  modelValue: Boolean,
  searinpuchDate: Object, 
  searinpuchDate3:Object,
  searchDate: String,
  searchDateModifiers:{
    isBt:Boolean
  }
})
const model = computed({
  get(){
    return new Proxy(props.searinpuchDate3,{
      set(obj,name,val){
        console.log('emit', name ,val)
        emit("update:searinpuchDate3", {
          ...obj,
         [name]:val
        });
        return true;
      }
    })
  },
  set(){
        emit("update:searinpuchDate3", {
      ...props.searinpuchDate3,
      keyword: val,
    });
  },
  
})
const emit = defineEmits([
  'update:modelValue',
  'update:searchDate',
  'update:searinpuchDate',
  // 'update:searinpuchDate3',
])
// 这里如果是对象的形式传值
//01- 这个是第一种双向绑定的方式
const handleKeywordChange = ( val)=>{
  emit('update:searinpuchDate',{
    ...props.searinpuchDate,
    keyword : val
  })
}
const change = (e) =>{
  const target = e.target.value
  emit('update: ',props.searchDateModifiers.isBt ? target + '修改了' : target)
}
const close = () => {
  emit('update:modelValue',false)
}
</script>


<style lang="css">
.model{
    width: 600px;
    height: 400px;
    border: 5px solid #ccc;
    margin-top:20px;
    padding:20px
    
}
.warn{
  margin-left:500px;
}
h4{
    font-size:16px;
    font-weight: bold;
}
.dvie div{
  float: left;
  margin-top: 20px;
}
</style>
